<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关注游戏管理</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/three.css" />
    <link rel="stylesheet" href="../css/head.css">
    <script type="text/javascript" src="../js/zepto.min.js"></script>
</head>
<body>
	<!--头部-->
    <div class="head">
    			<a href="firstPage.html">
            		<img src="../img/left_fan.png" alt="" class="img_fan"/>
            </a>
        <h2>关注游戏管理</h2>
    </div>
    <!--内容-->
    <ul class="content">
    	<li>
    		<img src="../img/three_1.png" alt="" class="gameImg" />
    		<div class="sky_div">
    			<h2>天涯明月刀</h2>
    			<input type="hidden" id="inHidden" value="5"/>
    			<span>游戏评级:</span>
    			<span class="spans"></span>
    			<span class="spans"></span>
    			<span class="spans"></span>
    			<span class="spans"></span>
    			<span class="spans"></span>
    		</div>
    		<div class="look_div">关注</div>
    	</li>
    <li>
    		<img src="../img/three_2.png" alt="" class="gameImg" />
    		<div class="sky_div">
    			<input type="hidden" id="inHidden1" value="3"/>
    			<h2>天天酷跑</h2>
    			<span>游戏评级:</span>
    			<span class="spans1"></span>
    			<span class="spans1"></span>
    			<span class="spans1"></span>
    			<span class="spans1"></span>
    			<span class="spans1"></span>
    		</div>
    		<div class="look_div">关注</div>
    	</li>
    <li>
    		<img src="../img/three_3.png" alt="" class="gameImg" />
    		<div class="sky_div">
    			<input type="hidden" id="inHidden2" value="3"/>
    			<h2>天涯明月刀</h2>
    			<span>游戏评级:</span>
    			<span class="spans2"></span>
    			<span class="spans2"></span>
    			<span class="spans2"></span>
    			<span class="spans2"></span>
    			<span class="spans2"></span>
    		</div>
    		<div class="look_div">关注</div>
    	</li>
    <li>
    		<img src="../img/three_4.png" alt="" class="gameImg" />
    		<div class="sky_div">
    			<input type="hidden" id="inHidden3" value="5"/>
    			<h2>天涯明月刀</h2>
    			<span>游戏评级:</span>
    			<span class="spans3"></span>
    			<span class="spans3"></span>
    			<span class="spans3"></span>
    			<span class="spans3"></span>
    			<span class="spans3"></span>
    		</div>
    		<div class="look_div">关注</div>
    	</li>
    <li>
    		<img src="../img/three_5.png" alt="" class="gameImg" />
    		<div class="sky_div">
    			<input type="hidden" id="inHidden4" value="5"/>
    			<h2>天涯明月刀</h2>
    			<span>游戏评级:</span>
    			<span class="spans4"></span>
    			<span class="spans4"></span>
    			<span class="spans4"></span>
    			<span class="spans4"></span>
    			<span class="spans4"></span>
    		</div>
    		<div class="look_div">关注</div>
    </li>
    </ul>
    
		 <ul class="dd">
             <li><a href="firstPage.html"><img src="../img/1.png" alt="" /></a><p>首页</p></li>
             <li><a href="video.html"><img src="../img/2.png" alt="" /></a><p>视频</p></li>
             <li><a href="store.html"><img src="../img/3.png" alt="" /></a><p>商城</p></li>
             <li><a href="fifty-mine.html"><img src="../img/a3.png" alt="" /></a><p>我的</p></li>
        </ul>
</body>
<script type="text/javascript">
	var spans = document.getElementsByClassName('spans');
	var spans1 = document.getElementsByClassName('spans1');
	var spans2 = document.getElementsByClassName('spans2');
	var spans3 = document.getElementsByClassName('spans3');
	var spans4 = document.getElementsByClassName('spans4');
	for (var i = 0;i<inHidden.value;i++) {
		spans[i].style.background = 'url(../img/three_xing1.png)';
		spans[i].style.backgroundSize = '2.3rem 2.3rem';
	}
	for (var i = 0;i<inHidden1.value;i++) {
		spans1[i].style.background = 'url(../img/three_xing1.png)';
		spans1[i].style.backgroundSize = '2.3rem 2.3rem';
	}
	for (var i = 0;i<inHidden2.value;i++) {
		spans2[i].style.background = 'url(../img/three_xing1.png)';
		spans2[i].style.backgroundSize = '2.3rem 2.3rem';
	}
	for (var i = 0;i<inHidden3.value;i++) {
		spans3[i].style.background = 'url(../img/three_xing1.png)';
		spans3[i].style.backgroundSize = '2.3rem 2.3rem';
	}
	for (var i = 0;i<inHidden4.value;i++) {
		spans4[i].style.background = 'url(../img/three_xing1.png)';
		spans4[i].style.backgroundSize = '2.3rem 2.3rem';
	}
	var bul = true;
	$('.look_div').click(function(){
		if (bul) {
		$(this).html('取消关注')
		$(this).css({
			color:'#f56243',
			backgroundColor:'#fff'
		})
		bul=false;
		}else{
		$(this).html('关注')
		$(this).css({
			color:'#fff',
			backgroundColor:'#f56243'
		})
		bul=true;
		}
	})
</script>
</html>